<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Map Tool</title>
		<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>	
		<script type="text/javascript" src="js/leaflet.js"></script>
		<script type="text/javascript" src="js/leaflet.ChineseTmsProviders.js" ></script>
		<script type="text/javascript" src="js/d3.min.js"></script>
		<script type="text/javascript" src="js/heatmap/heatmap.js" ></script>
		<script type="text/javascript" src="js/heatmap/leaflet-heatmap.js"></script>
		<script type="text/javascript" src="js/contral.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.12.1/jquery-ui.js" ></script>
		<script src="js/playbar/jquery-PlayBar.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="js/loading/js/loading.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js" ></script>
		<!--<script type="text/javascript" src="js/bootstrap-switch.min.js" ></script>-->
		<script type="text/javascript" src="js/honeySwitch/lib/honeySwitch.js" ></script>
		<script type="text/javascript" src="leaflet-pulse-icon/L.Icon.Pulse.js" ></script>
		<script type="text/javascript" src="js/choose_select/chosen.jquery.js" ></script>
		<script type="text/javascript" src="js/clock/script.js" ></script>
		<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script>
		<script type="text/javascript" src="js/Donut3D.js" ></script>
		<script type="text/javascript" src="test.js" ></script>
		
		<link rel="stylesheet" href="css/leaflet.css" />
		<link rel="stylesheet" href="js/jquery-ui-1.12.1/jquery-ui.min.css" />
		<link rel="stylesheet" type="text/css" href="js/playbar/barstyle.css"/>
		<link rel="stylesheet" href="js/loading/css/loading.css" />
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/bootstrap-switch.min.css" />
		<link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.css" />
		<link rel="stylesheet" type="text/css" href="js/honeySwitch/honeySwitch.css"/>
		<link rel="stylesheet" href="leaflet-pulse-icon/L.Icon.Pulse.css" />
		<link rel="stylesheet" href="js/choose_select/chosen.css" />
		<link rel="stylesheet" href="js/clock/style.css" />
		<link rel="stylesheet" type="text/css" href="test.css"/>
	</head>
	<body>
		<div id="bg" style="background-color: #E9E8E8;">
			<div id="clock" class="dark">
			    <div class="display">
			        <div class="ampm"></div>
			        <div class="data"></div>
			        <div class = "weather"></div>
			        <div class="digits"></div>
			    </div>
			</div>
			<div id="map">
				<div style="position: absolute; z-index: 801; width: 150px; height: 30px; left: 50px; top: 27px;">
					<span id="show_R" class="switch-off" themeColor="red" style="position: absolute; top: 5px; left: 25px;"></span>
					<p style="position: absolute; left: 70px; top: 7px; font-size: 13px; font-weight: 700;">Show Road</p>
				</div>
			</div>
			<div id="bar" style="display: none; position: absolute; left: 1162px; top: 170px; width: 60px; height: 130px; z-index: 10;">
				<div id = "circle-contral"><i id="i6" class="fa fa-stop fa-stack-2x" style="top: 6.5px; left: 0.5px; color: none;" title="Stop" ></i></div>
				<div id = "circle-contral1"><i id="i7" class="fa fa-play fa-stack-2x" style="top: 7px; left: 3.5px; " title="Play" ></i></div>
			</div>
			<div id="chart1" style="background-color: white;">
				<p style="position: absolute; border-top:2px solid silver; width: 84px; top: 20px; left: 42px;"></p>
				<p style="position: absolute; width: 130px; height: 20px; top: 12px; left: 165px; font-weight: 700;">Taxi Flow Predition</p>
				<p style="position: absolute; border-top:2px solid silver; width: 84px; top: 20px; right: 65px;"></p>
				<div id="pre" style="position: absolute; left: 15px; top: 60px; width: 452px; height: 185px; border: 1px solid silver; border-radius: 15px;">
					<p style="font-size: 13px; font-weight: 700; height: 40px; position: absolute; top: 10px; left: 10px;">Date:　<input type="text" id="datepicker4" style="width: 90px; height: 25px; outline: none; border-radius: 5px;" value="2014-02-01"></p>
					<p style="position: absolute; font-size: 13px; font-weight: 700; left: 246px; top: 10px;">Time : <input id="va6" type="time" value="17:30" / style="outline: none; border-radius: 5px; height: 25px;"></p>
					<!--<select id = "se2" style="outline: none; border-radius: 5px;  left: 150px; height: 25px; position: absolute; top: 70px; border-width: 2px;border-style:inset; border-color: initial;"></select>-->
					<div style="position: absolute; width: 360px; height: 40px; left: 5px; top: 51px; border-top-left-radius: 15px; border-top-right-radius: 15px; border: 1px solid silver; background-color: #F2701D;">
						<p class="roadP" style="position: absolute; text-align: center; width: 65px; height: 30px; line-height: 30px; font-weight: 700; border-radius: 20px; left: 147px; background-color: white; top: 4.5px;">Road123</p>
					</div>
					<div style="border: 1px solid silver; width: 360px; height: 80px; position: absolute; top: 90px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; left: 5px;">
						<ol class="ol1" style="text-align: center; position: absolute;  width: 75px; height: 20px; left: 25px; top: 10px; border-radius: 5px; background-color: white;">
							<li class="l1" style="text-align: center; font-size: 15px; font-weight: 700; position: absolute; width: 30px; height: 20px; left: 5px; top: 0.5px;"></li>
							<li style="font-size: 15px; font-weight: 700; position: absolute; left: 37px; ">:</li>
							<li class="l2" style="text-align: center; font-size: 15px; font-weight: 700; position: absolute; width: 30px; height: 20px; left: 42px; top: 0.5px;"></li>
						</ol>
						<ol class="ol2" style="position: absolute;  width: 75px; height: 20px; left: 154px; top: 10px; border-radius: 5px; background-color: white;">
							<li class="l3" style="text-align: center; font-size: 15px; font-weight: 700; position: absolute;  width: 30px; height: 20px; left: 5px; top: 0.5px;"></li>
							<li style="font-size: 15px; font-weight: 700; position: absolute; left: 37px; ">:</li>
							<li class="l4" style="text-align: center; font-size: 15px; font-weight: 700; position: absolute;  width: 30px; height: 20px; left: 42px; top: 0.5px;"></li>
						</ol>
						<ol class="ol3" style="position: absolute;  width: 75px; height: 20px; left: 269px; top: 10px; border-radius: 5px; background-color: white;">
							<li class="l5" style="text-align: center; font-size: 15px; font-weight: 700; position: absolute;  width: 30px; height: 20px; left: 5px; top: 0.5px;"></li>
							<li style="font-size: 15px; font-weight: 700; position: absolute; left: 37px; ">:</li>
							<li class="l6" style="text-align: center; font-size: 15px; font-weight: 700; position: absolute;  width: 30px; height: 20px; left: 42px; top: 0.5px;"></li>
						</ol>
						<div class="f1" style="text-align: center; font-size: 15px; font-weight: 700; position: absolute; border: 1px solid silver; width: 80px; height: 25px; border-radius: 15px; top: 45px; left: 22px;"></div>
						<div class="f2" style="text-align: center; font-size: 15px; font-weight: 700; position: absolute; border: 1px solid silver; width: 80px; height: 25px; border-radius: 15px; top: 45px; left: 151px;"></div>
						<div class="f3" style="text-align: center; font-size: 15px; font-weight: 700; position: absolute; border: 1px solid silver; width: 80px; height: 25px; border-radius: 15px; top: 45px; left: 266px;"></div>
					</div>
					<button class="ten" style="position: absolute; outline: none; border-radius: 5px; left: 385px; top: 52px; height: 28px; width: 50px; background-color: #EFF4EF;"><i class="fa  fa-caret-up fa-stack-2x" style="top: -2.5px;"></i></button>
					<button class="twen" style="position: absolute; outline: none; border-radius: 5px; left: 385px; top: 97px; height: 28px; width: 50px; background-color: #EFF4EF;"><i class="fa fa-stop fa-stack-1x" style="top: 2.5px;"></i></button>
					<button class="now" style="position: absolute; outline: none; border-radius: 5px; left: 385px; top: 140px; height: 28px; width: 50px; background-color: #EFF4EF;"><i class="fa fa-caret-down fa-stack-2x" style="top: -2.5px;"></i></button>
					<button class="prediction" style="position: absolute; outline: none; border-radius: 5px; left: 385px; top: 7px; height: 28px; width: 50px; background-color: #EFF4EF;"><i class="fa fa-search fa-stack-1x" style="top: 2.5px;"></i></button>
				</div>
				<button id="heat_bu" style="position: absolute;top: 200px; display: none;">哈哈</button>
			</div>
			<div id="chart3" style="background-color: white;"> 
				<div id = "message">
					<p style="position: absolute; border-top:1.5px solid silver; width: 60px; top: 20px; left: 29px;"></p>
					<p style="position: absolute; width: 140px; height: 20px; top: 12px; left: 95px; font-weight: 700;">Information Display</p>
					<p style="position: absolute; border-top:1.5px solid silver; width: 62px; top: 20px; right: 45px;"></p>
				</div>
				<div id = "left_board"></div>
				<div id = "right_board"></div>
				<div id = "menue">
					<p style="font-size: 13px; font-weight: 700; height: 40px; position: absolute; top: 10px; left: 30px;">Date:　<input type="text" id="datepicker2" style="width: 90px; height: 25px; outline: none; border-radius: 5px;" value="2014-01-01"></p>
					<button id="rectselect" style="position: absolute; left: 650px; top: 8px; cursor: pointer; background-color: #EFF4EF; height: 28px; width: 28px; border-radius: 7px; outline: none;z-index: 10;" title="Select"><i id="i1" class="fa fa-hand-pointer-o fa-stack-1x" style="top: 2.5px;"></i></button>
					<button id = "fa-chart" style="position: absolute; left: 705px;; top: 8px; cursor: pointer; background-color: #EFF4EF; height: 28px; width: 28px; border-radius: 7px; outline: none;z-index: 10;" title="Chart"><i id="i2" class="fa fa-bar-chart fa-stack-1x" style="top: 2.5px;"></i></button>
					<p style="font-size: 13px; font-weight: 700; height: 40px; position: absolute; top: 12px; left: 220px;">Weather:</p>
					<p style="font-size: 13px; font-weight: 700; height: 40px; position: absolute; top: 12px; left: 285px; color: red;">Rain</p>
					<p style="font-size: 13px; font-weight: 700; height: 40px; position: absolute; top: 12px; left: 355px;">Day:</p>
					<p id="we" style="font-size: 13px; font-weight: 700; height: 40px; position: absolute; top: 12px; left: 395px; color: red;">Wednesday</p>
					<p style="font-size: 13px; font-weight: 700; height: 40px; position: absolute; top: 12px; left: 510px;">Festival:</p>
					<p style="font-size: 13px; font-weight: 700; height: 40px; position: absolute; top: 12px; left: 575px; color: red;">Yes</p>
				</div>
				<div id="real_menue" style="text-align: center; position: absolute; left: 1144px; top: 5px; height: 45px; width: 45px; border: 1px solid #D4D9DC; border-top-right-radius: 15px; border-bottom-right-radius: 15px;">
					<i class="fa fa-align-justify" style="margin-top: 15px;"></i>
				</div>
			</div>
			<div id = "pop" >
				<i id="pop1"></i>
				<div id="pop2" style="font-size: 10px; text-align: center; opacity: 1; margin-top: -1px; font-weight: 1px;"></div>
			</div>
			<div id ="toolbar">
				<div id="playmenue" style="position: absolute; width: 120px;height: 30px; left: 20px;">
					<button id = "icon"><i id="i3" class="fa fa-play fa-stack-1x" style="top: 6.5px; left: 1.5px;" title="Play"></i></button>
					<button id = "icon1"><i id="i4" class="fa fa-backward fa-stack-1x" style="top: 6.5px; left: -1.5px;" title="Yeaterday"></i></button>
					<button id = "icon2"><i id="i5" class="fa fa-forward fa-stack-1x" style="top: 6.5px; left: 1.5px;" title="Tomorrow"></i></button>
				</div>
				<div class = "test"></div>
			</div>
			<div id="qurey">
				<div id = "biaoti" style="position: absolute; width: 347px; height: 41px;">
					<p style="position: absolute; border-top:2px solid silver; width: 60px; top: 20px; left: 37px;"></p>
					<p style="position: absolute; width: 122px; height: 20px; top: 12px; left: 110px; font-weight: 700;">Road Operation</p>
					<p style="position: absolute; border-top:2px solid silver; width: 60px; top: 20px; right: 58px;"></p>
				</div>
				<div id="road_op">
					<p style="text-align: center; line-height: 35px; height: 35px; border-top-left-radius: 15px; border-top-right-radius: 15px; font-weight: 700; background-color: #F2701D;">Query Road Section</p>
					<p style="position: absolute; left: 20px; top: 40px; font-size: 13px; font-weight: 700;">Date:　<input type="text" id="datepicker" style="width: 90px; height: 30px; outline: none;  border-radius: 5px;" value="2014-01-01"></p>
					<p style="position: absolute; left: 20px; top: 80px; font-size: 13px; font-weight: 700;">Road:　
						<select id = "se1" data-placeholder="选择路段..." class="chosen-select" style="width:100px; " tabindex="2"></select>
					</p>
					<p style="position: absolute; top: 124px; left: 20px; font-size: 13px; font-weight: 700;">Time:　<input id="va1" type="time" value="08:00" / style=" outline: none; border-radius: 5px; height: 30px; width: 90px;"></p>
					<button id="c" type="button" style="position: absolute; outline: none; border-radius: 5px; left: 242px; height: 28px; top: 142px; width: 50px; background-color: #EFF4EF;"><i class="fa fa-search fa-stack-1x" style="top: 2.5px;"></i></button>
				</div>
				<div id="tabs" style="width: 320px; height: 210px; position: absolute; top: 230px; left: 15px; ">
					<div style="position: absolute; width: 275px; height: 40px; top: 25px; left: 18px;">
						<p style="height: 25px; font-weight: 700; position: absolute; top: 10px; left: 75px;">Taxi</p>
						<p style="height: 25px; font-weight: 700; position: absolute; top: 11px; left: 170px;">Flow</p>
						<span id="show_taxi_flow" class="switch-off" themeColor="#F2701D" style="position: absolute; top: 10px; left: 120px;"></span>
					</div>
				    <div id="taxi_table" style="position: absolute; width: 310px; height: 165px; left: 5px; top: 62px; border: 1px solid silver; border-radius: 15px; display: block;">
						<p style="text-align: center; line-height: 35px; height: 35px; border-top-left-radius: 15px; border-top-right-radius: 15px; background-color: #F2701D; font-weight: 700;">Show The Animation Of Taxi</p>
						<p style="position: absolute; font-size: 13px; font-weight: 700; left: 10px; top: 50px; height: 40px;">Date_Select　:　<input type="text" id="datepicker3" style="width: 90px; height: 25px; outline: none; border-radius: 5px;" value="2014-01-01"></p>
						<p style="position: absolute; font-size: 13px; font-weight: 700; left: 10px; top: 100px;">Time_Section : <input id="va4" type="time" value="08:00" / style="outline: none; border-radius: 5px; height: 25px;"> ~ <input id="va5" type="time" value="08:00" / style="outline: none; border-radius: 5px; height: 25px;"></p>
						<button id="taxi_switch" style = "position: absolute; left: 240px; top: 132px; cursor: pointer; background-color: #EFF4EF; height: 28px; width: 50px; border-radius: 5px; outline: none;z-index: 10;"><i class="fa fa-taxi fa-stack-1x" style="top: 2.5px;"></i></span></button>
					</div>
				  	<div id="flow_table" style="position: absolute; width: 310px; height: 165px; left: 5px; top: 62px; border: 1px solid silver; border-radius: 15px;display: none;">
						<p style="text-align: center; line-height: 35px; height: 35px; border-top-left-radius: 15px; border-top-right-radius: 15px; background-color: #F2701D; font-weight: 700;">Show The Change Of Taxi Flow</p>
						<p style="position: absolute; font-size: 13px; font-weight: 700; left: 10px; top: 50px; height: 40px;">Date_Select　:　<input type="text" id="datepicker1" style="width: 90px; height: 25px; outline: none; border-radius: 5px;" value="2014-01-01"></p>
						<p style="position: absolute; font-size: 13px; font-weight: 700; left: 10px; top: 100px;">Time_Section : <input id="va2" type="time" value="08:00" / style="outline: none; border-radius: 5px; height: 25px;"> ~ <input id="va3" type="time" value="08:00" / style="outline: none; border-radius: 5px; height: 25px;"></p>
						<button class="reloadbt" style="position: absolute; outline: none; border-radius: 5px; left: 240px; top: 132px; height: 28px; width: 50px; background-color: #EFF4EF;"><i class="fa fa-search fa-stack-1x" style="top: 2.5px;"></i></button>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
